{{ define "content" }}
<div class="page-title">
    <div class="title_left">
        <h3>{{ i18n "Cache" . }}</h3>
    </div>

    <div class="title_right">
        <form class="form-horizontal form-label-left" role="form" method="post" id="send">
            <div class="form-group pull-right">
                <div class="input-group">
                    <label class="btn-group">
                        <button type="submit" id="send" class="btn btn-icon btn-danger btn-sm"
                                data-toggle="modal" data-target="#modal"
                                data-modal-title="{{ i18n "Confirm flush cache" . }}"
                                data-modal-body="{{ i18n "Will be flush cache. Are you sure?" . }}"
                                data-modal-callback="action('flush');">
                            <i class="fas fa-eraser" title="{{ i18n "Flush" . }}"></i>
                        </button>
                    </label>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="clearfix"></div>

<div class="row" id="devices">
    <div class="x_panel">
        <div class="x_content">
            <div class="table-responsive">
                <table class="table table-striped datatable dt-responsive nowrap" id="items" style="width:100%">
                    <thead>
                    <tr>
                        <th>{{ i18n "Topic" . }}</th>
                        <th>{{ i18n "Datetime" . }}</th>
                        <th>{{ i18n "Payload" . }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    {{ range $i, $item := .cache_items }}
                    <tr>
                        <td>{{ $item.Topic.String }}</td>
                        <td><script type="application/javascript">document.write(dateToString('{{ $item.Datetime.Format "2006-01-02T15:04:05-07:00" }}'))</script></td>
                        <td><pre><code>{{ printf "%s" $item.Payload|raw }}</code></pre></td>
                    </tr>
                    {{ end }}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{{ end }}

{{ define "head" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" false) }}
{{ end }}

{{ define "js" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net/js/jquery.dataTables.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive/js/dataTables.responsive.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.min.js" false) }}

    <script type="application/javascript">
        $(document).ready(function () {
            $('#items').DataTable().order([1, 'desc']).draw();
        });
    </script>
{{ end }}
